import { useI18n } from 'vue-i18n'

import { createUser, getRoleOptions, updateUser } from '@/apis/index'
import { UserModalDto } from '@/apis/user/type/dto'
import { useRef } from '@/hooks'
import { SexEnum, StatusEnum } from '@/types/enum'
import { FormInputList, FormInputListRules, LabelValue } from '@/types/interface'
import { catchToTuple } from '@/utils'

export function useModal({ init }: any) {
  const { t } = useI18n()
  const modalShow = ref<boolean>(false)
  const modalType = ref<'create' | 'update'>('create')
  const roleOptions = ref<LabelValue[]>([])

  // 表单数据
  const [modalFormData, handleModalFormDataReset] = useRef<UserModalDto>({
    username: null,
    sex: null,
    nick_name: null,
    phone: null,
    email: null,
    status: StatusEnum.DYNAMIC,
    role_ids: null,
    remark: null,
  })

  // 表单配置
  const modalFormList = computed((): FormInputList<UserModalDto> => {
    return [
      {
        key: 'username',
        type: 'input',
        disabled: modalType.value === 'update',
        label: t('common.username'),
        placeholder: t('common.please_enter', { name: t('common.username') }),
      },
      {
        key: 'sex',
        type: 'select',
        label: t('user.sex'),
        placeholder: t('common.please_select', { name: t('user.sex') }),
        options: [
          { label: t('common.sex_male'), value: SexEnum.MALE },
          { label: t('common.sex_female'), value: SexEnum.FEMALE },
        ],
      },
      {
        key: 'nick_name',
        type: 'input',
        label: t('user.nick_name'),
        placeholder: t('common.please_enter', { name: t('user.nick_name') }),
      },

      {
        key: 'phone',
        type: 'input',
        label: t('user.phone'),
        placeholder: t('common.please_enter', { name: t('user.phone') }),
      },
      {
        key: 'email',
        type: 'input',
        label: t('common.email'),
        placeholder: t('common.please_enter', { name: t('common.email') }),
      },
      {
        key: 'role_ids',
        type: 'select',
        label: t('user.role'),
        placeholder: t('common.please_select', { name: t('user.role') }),
        multiple: true,
        options: roleOptions.value,
      },
      {
        key: 'status',
        type: 'radio',
        label: t('common.status'),
        placeholder: t('common.please_select', { name: t('common.status') }),
        options: [
          { label: t('common.status_enable'), value: StatusEnum.DYNAMIC },
          { label: t('common.status_disable'), value: StatusEnum.STATIC },
        ],
      },
      {
        key: 'remark',
        type: 'textarea',
        label: t('common.remark'),
        placeholder: t('common.please_enter', { name: t('common.remark') }),
      },
    ]
  })

  // 表单校验规则
  const modalFormRules: FormInputListRules<UserModalDto> = {
    username: {
      required: true,
      renderMessage: () => t('common.please_enter', { name: t('common.username') }),
      trigger: ['input'],
    },
    status: {
      required: true,
      renderMessage: () => t('common.please_select', { name: t('common.status') }),
      trigger: ['change'],
    },
  }

  // 取消
  const handleModalCancel = () => {
    modalShow.value = false
    handleModalFormDataReset()
  }

  // 提交
  const handleModalSubmit = async () => {
    const [err, data] = await catchToTuple(
      modalType.value === 'update' ? updateUser(modalFormData.value) : createUser(modalFormData.value),
    )

    if (err) return

    if (data?.code === 200) {
      window.$message.success(data.message)
      handleModalCancel()
      init()
    }
  }

  // 获取角色列表
  const getRoleList = async () => {
    const [err, data] = await catchToTuple(getRoleOptions())

    if (err) return

    if (data?.code === 200) {
      roleOptions.value = data.data || []
    }
  }

  onMounted(() => {
    getRoleList()
  })

  return {
    modalShow,
    modalType,
    modalFormData,
    modalFormList,
    modalFormRules,
    handleModalCancel,
    handleModalSubmit,
    handleModalFormDataReset,
  }
}
